<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/hander.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/primary.css">
</head>
<body>
<div id="app">
    <hander :asg="asg" :arr="arr" :crr="crr"></hander>
    <div class="width980 margin">
        <!--小学教育-->
        <div class="all">
            <div class="wai">
                <div class="container">
                    <div style="color: #333;font-size: 20px;line-height: 60px">小学教育</div>
                    <ul class="xjiao">
                        <li v-for="item in jiaoyu">
                            <div class="xjiao-left">
                                {{item.title}}
                            </div>
                            <ul class="xjiao-right">
                                <li v-for="item1 in item.name">{{item1}}</li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="container" style="display: flex;justify-content: space-between">
                    <div class="lunleft">
                        <div class="downarrow">
                            <img src="img/primary/down-arrow.png" width="100%" height="100%a">
                        </div>
                        <ul class="listimg">
                            <li v-for="item in kech">
                                <div class="icon">
                                    <img v-bind:src="'img/primary/'+item.img" width="100%" height="100%">
                                </div>
                                <div class="shu"></div>
                            </li>
                        </ul>
                        <ul class="listli">
                            <li v-for="item in kech">
                                <div class="luntp">
                                    {{item.ketitle}}
                                </div>
                                <ul class="lunke" v-for="item1 in item.nei">
                                    <li>{{item1}}</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!--轮播-->
                    <div class="lunzj">
                        <ul class="lunzt">
                            <li v-show="i === index" v-for="(item,i) in lunimg">
                                <img v-bind:src="'img/primary/'+item" width="100%" height="100%">
                            </li>
                        </ul>
                        <ul class="dot1">
                            <li v-bind:class="{white:i===index}" v-for="(item,i) in lunimg"></li>
                        </ul>
                        <ul class="lunxia">
                            <li v-for="item in lunxia">
                                <div class="xiabt">
                                    <a href="#" style="color: #FF5722;font-size: 16px;">{{item.title}}</a>
                                </div>
                                <ul class="xialie">
                                    <li v-for="item1 in item.zt"><a href="#">{{item1}}</a></li>

                                </ul>
                            </li>

                        </ul>
                    </div>
                    <div class="lunright">
                        <div class="lunrightt">
                            <div class="title" style="margin-left: 10px">家长关注</div>
                            <ul class="jiazh">
                                <li v-for="item in jiazh">{{item}}</li>

                            </ul>
                        </div>
                        <div class="lunrightb">
                            <div class="title" style="margin-left: 10px">专题推荐</div>
                            <div class="jiazh-lun">
                                <ul class="jiazh-lunt">
                                    <li v-show="i === indexx" v-for="(item,i) in lunximg">
                                        <img v-bind:src="'img/primary/'+item" width="100%" height="100%">
                                    </li>
                                </ul>
                                <ul class="dot2">
                                    <li v-bind:class="{dian:i===indexx}" v-for="(item,i) in lunximg"></li>
                                </ul>
                            </div>
                            <ul class="jiazh-lunli">
                                <li>
                                    <div class="square"></div>
                                    <div class="a"><a href="#">2018年北达资源中学招生简章</a></div>
                                </li>
                                <li>
                                    <div class="square"></div>
                                    <div class="a"><a href="#">【扫盲】户籍、学籍、房产地小学相关问答</a></div>
                                </li>
                                <li>
                                    <div class="square"></div>
                                    <div class="a"><a href="#">2018年北达资源中学招生简章</a></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="fudao" style="border-bottom:1px solid #ededed">
                中学介绍
            </h2>
            <div class="tp-lunbo flex justifycenter">
                <div class="tp-left"></div>
                <div class="tp-center">
                    <ul class="tp-center-kuan flex justifycenter">
                        <li v-for="item in lunbo">
                            <img :src="item.pic">
                        </li>
                    </ul>
                </div>
                <div class="tp-right"></div>
            </div>
            <h2 class="fudao">
                小学
            </h2>
            <ul class="question flex justifycenter wrap">
                <li v-for="item in information">
                    <div class="question-top">
                        <h3 class="question-name">{{item.name}}</h3>
                        <a>更多</a>
                    </div>
                    <div class="flex  question-box">
                        <img :src="item.pic">
                        <ul class="question-bottom">
                            <li v-for="item1 in item.arr">
                                <a>{{item1}}</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <h2 class="fudao">
                学科辅导
            </h2>
            <ul class="subject flex justifycenter wrap">
                <li v-for="item in subject">
                    <div class="subject-top">
                        <h3 class="subject-name">{{item.name}}</h3>
                        <a>更多</a>
                    </div>
                    <div>
                        <ul class="subject-bottom">
                            <li v-for="item1 in item.arr" class="flex ">
                                <a>{{item1}}</a>
                                <span class="subject-time">2018-12-01</span>
                            </li>
                        </ul>
                    </div>
                </li>

            </ul>
            <h2 class="fudao">
                小学试题
            </h2>
            <ul class="question flex justifycenter wrap">
                <li v-for="item in question">
                    <div class="question-top">
                        <h3 class="question-name">{{item.name}}</h3>
                        <a>更多</a>
                    </div>
                    <div class="flex  question-box">
                        <img :src="item.pic">
                        <ul class="question-bottom">
                            <li v-for="item1 in item.arr">
                                <a>{{item1}}</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <h2 class="fudao">
                小学辅导
            </h2>
            <ul class="tutor flex justifycenter">
                <li v-for="item in tutor">
                    <div class="tutor-top">
                        <h3 class="tutor-name">{{item.name}}</h3>
                        <a>更多</a>
                    </div>
                    <ul class="tutor-bottom">
                        <li v-for="item1 in item.arr">
                            <a>{{item1}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <foot :city="city" :footer="footer"></foot>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="component/hander.js"></script>
    <script src="component/footer.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                asg: '北京',
                arr: ['北京', '上海', '广州', '深圳', '天津', '南京', '沈阳', '济南', '成都', '贵州', '杭州', '西安', '武汉', '苏州'],
                crr: ['首页', '小学', '初中', '高中', '中考', '高考', '学习中心', '选课中心', '免费公开课'],
                city: ['北京小学升初中', '北京中考', '北京高考', '北京初中', '北京高中', '南京小学', '南京初中', '南京高中', '深圳小学', '深圳中考', '深圳高考', '武汉小学', '武汉中考', '武汉高考', '天津小学', '天津初中', '天津高中', '北京中考', '广州小学升初中', '广州中学', '广州高考', '西安小学', '西安中考', '陕西高考', '西安高中', '上海小学', '上海初中', '上海高中', '杭州小学', '杭州中考', '浙江高考', '成都中考', '成都高考', '成都学校', '成都真题'],
                footer: ['关于我们', '联系我们', '社会招聘', '校园招聘', '爱智康资讯手机站'],
                tutor: [],
                question: [],
                subject: [],
                information: [],
                lunbo: [],
                jiaoyu: [],
                kech: [],
                lunxia: [],
                lunimg: ["L1.png", "L2.png"],
                lunximg: ["L3.png", "L4.png", "L5.png"],
                index: 0,
                indexx: 0,
                jiazh: []

            },
            methods: {
                gettutor() {
                    axios.get("data/tutor.json").then((res) => {
                        this.tutor = res.data
                    })
                },
                getquestion() {
                    axios.get("data/question.json").then((res) => {
                        this.question = res.data
                    })
                },
                getsubject() {
                    axios.get("data/subject.json").then((res) => {
                        this.subject = res.data
                    })
                },
                getinformation() {
                    axios.get("data/information.json").then((res) => {
                        this.information = res.data
                    })
                },
                getlunbo() {
                    axios.get("data/lunbo.json").then((res) => {
                        this.lunbo = res.data
                    })
                },
                change() {
                    if (this.index === this.lunimg.length - 1)
                        this.index = -1
                    this.index++
                },
                change1() {
                    if (this.indexx === this.lunximg.length - 1)
                        this.indexx = -1
                    this.indexx++
                },
                start() {
                    setInterval(this.change, 2000)
                    setInterval(this.change1, 2500)
                },
                first() {
                    axios.get("data/jiaoyu.json").then(res => {
                        this.jiaoyu = res.data
                    })
                    axios.get("data/kech.json").then(res => {
                        this.kech = res.data
                    })
                    axios.get("data/lunxia.json").then(res => {
                        this.lunxia = res.data
                    })
                    axios.get("data/jiazh.json").then(res => {
                        this.jiazh = res.data
                    })
                }
            },
            mounted() {
                this.gettutor()
                this.getquestion()
                this.getsubject()
                this.getinformation()
                this.getlunbo()
                this.first();
                this.start()
            }

        })
    </script>
</body>
</html>